<template>
	<page ref='page' >
		<view class="page">
			<!-- 我的订单 wwl-->
				<view class="tab_row">
					<tabRow :list='tabList' @change='changeTab' ref='tabRow' />
				</view>
				<!-- <view class="list_info"> -->
				<swiper class="tab_data_box" :current='tabIndex' :duration="300" @change="onswiperchange">
					<swiper-item class="tab_data_row" v-for="(item, index) in tabList" :key="index">
						<scroll-view  style='height:100%'  enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore">
						<view class="list" v-if="total > 0 || loading">
							<view class="info_row" v-for='(row,i) in list' :key='i' >
								<view class="shop" @click="onshop(row)">
									<view class="left">
										<image :src="row.avatar" mode="scaleToFill" v-if="row.avatar != null"></image>
										<image src="https://xiaoqu.wuguoxin.vip/uploads/web/shop.png" mode="scaleToFill" v-else></image>
										<text>{{row.shopping_name}}<n-icon name="right" size="30" color="#000" class="youjiantou1" v-if="row.shopping_type != 0"></n-icon></text>
									</view>
									<view class="right">
										{{statusList.find(c=>c.id == row.status) ? statusList.find(c=>c.id == row.status).text : ''}}
									</view>
								</view>
								<view class="commodity_box" @click="onDetails(row)">
									<view class="left">
										<image :src="row.goods_cover" mode="scaleToFill"></image>
									</view>
									<view class="right">
										<view class="right_left">
											<view class="name">
												{{row.goods_name}}
											</view>
											<view class="label">
												{{row.goods_sku}}
											</view>
										</view>
										<view class="right_right">
											<view class="money">
												¥ {{row.amount_one}}
											</view>
											<view class="num">
												x {{row.count}}
											</view>
										</view>
									</view>
								</view>
								<view class="money_box">
									<text>共1件，实付款：¥</text><text class="money">{{row.amount}}</text>
								</view>
								<view class="button_box">
									<button class="btn" @click.stop='cancellationOrder(row.id,i)' v-if="row.status == 1"  :loading="operationLoading && operationType =='pay' && operationId == row.id">取消支付</button>
									<button class="btn btn1" @click.stop='onPay(null,row.id)' v-if="row.status == 1"  :loading="operationLoading && operationType =='pay' && operationId == row.id">支付</button>
									<button class="btn" @click.stop='onComment(row)' v-if="row.status == 5">发表评论</button>
									<!-- <button class="btn" :loading="operationLoading && operationType =='addCart'  && operationId == row.id" @click.stop="onAddCart(row,i)"  v-if="row.status > 3">加入精算单</button> -->
									<button class="btn" @click.stop="orderTracking(row)" v-if="row.status == 4 || row.status == 5 ">查看物流</button>
									<button class="btn btn1" :loading="operationLoading && operationType =='confirmReceipt'  && operationId == row.id"  @click.stop="onConfirmReceipt(row,i)"  v-if="row.status == 4 || row.status == 3">确认收货</button>
									
									<button class="btn btn1" :loading="operationLoading && operationType =='Confirmtuikuan'  && operationId == row.id"  @click.stop="onConfirmtuikuan(row.id)"  v-if="row.status == 4 || row.status == 3">申请退款</button>
									
									
								</view>
							</view>
						</view>
						<empty v-else />
					</scroll-view>
					</swiper-item>
				</swiper>
			<!-- </view> -->
			<u-popup v-model="payObj.visible" mode='bottom'  height="auto"  :borderRadius='30' >
				<view class="pay_pop">
					<view class="icon" @click="payObj.visible = false">
						<n-icon name="close" size="44"  color='#A7Abba'></n-icon>
					</view>
					<view class="row"  @click="onPay(2)" >
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/weixin01.png" mode="scaleToFill"></image>
						<text>微信</text>
					</view>
					<!-- <view class="row" @click="onPay(1)">
						<image src="https://xiaoqu.wuguoxin.vip/uploads/web/zhifubao01.png" mode="scaleToFill"></image>
						<text>支付宝</text>
					</view> -->
				</view>
			</u-popup>
			
		</view>
	</page>
	
</template>

<script>
	import uPopup from '@/components/u-popup.vue'
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	import {
		getOrderList,setConfirmReceipt,setAddCart,setOrderPay,orderCloseOrder,setConfirmtuikuan
	} from "../static/api.js"
	import tabRow from '@/components/tab-row.vue'
	import {mapState} from 'vuex'
	export default {
		components: {
			tabRow,uPopup
		},
		data() {
			return {
				payObj:{
					visible:false,
				},
				// '1已提交 2已关闭 3 待发货 4 待收货 5待评价 6完成'
				tabList:[{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付",
						text:'待支付'
					},
					{
						id: 3,
						name: "待发货",
						text:'待发货'
					},
					{
						id: 4,
						name: "待验收",
						text:'卖家已发货'
					},
					{
						id:5,
						name: "待评论",
						text:'买家已签收'
					}
				],
				statusList: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付",
						text:'待支付',
					},
					{
						id: 2,
						name: "已关闭",
						text:'已关闭'
					},
					{
						id: 3,
						name: "待发货",
						text:'待发货'
					},
					{
						id: 4,
						name: "待验收",
						text:'卖家已发货'
					},
					{
						id:5,
						name: "待评论",
						text:'买家已签收'
					},
					{
						id:6,
						name: "已完成",
						text:'已完成'
					},
					{
						id:7,
						name: "申请退款",
						text:'申请退款'
					}
				],
				tabIndex:0,
				tabActive: 0,
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading:false,
				operationLoading:false,
				operationId:null,
				operationType:null,
				pingtai:1,
			}
		},
		onShow() {
			if (this.$global.$editUploadBack(3, 'orderIndex')) {
				this.total = 0
				this.page = 1
				this.getList()
			}
		},
		computed: {
			...mapState(['duanType'])
		},
		onReady(){
			if(this.$refs.tabRow.active  != this.tabActive) this.$refs.tabRow.active  = this.tabActive
		},
		onLoad(params) {
			
			//判断平台
			// #ifdef H5 || MP-WEIXIN
			this.pingtai = 1;
			// #endif
			// #ifdef APP-PLUS
			this.pingtai = 2;
			// #endif
			
			if(params.status){
				this.tabActive = Number(params.status)
				this.tabIndex = this.tabList.findIndex(x=>x.id == this.tabActive)
			}
			this.$global.$editUploadBack(2, 'orderIndex');
			this.getList()
		},
		onPullDownRefresh(){
			if(this.tabActive == 1){
				this.total = 0
				this.page = 1
				this.getList()
			}
		},
		methods: {
			//申请退款
			onConfirmtuikuan(id){
				
				if(this.operationLoading) return
				uni.showModal({
					title: '提示',
					content: `您确认申请退款吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.operationLoading = true
						   this.operationType = 'Confirmtuikuan'
						   this.operationId = id
						  try{
							var res1  = await setConfirmtuikuan({id:id})
							console.log(res1,'申请退款')
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
							this.getList();
							// this.$set(this.list[i],'status',5)
						  }catch{
							  this.operationLoading = false
							  this.operationType = null
							  this.operationId = null
						  }
					  }
					}
				})
			},
			// 取消订单
			async cancellationOrder(id,i){
				try{
					var res = await orderCloseOrder({id});
					console.log(res,'取消支付');
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
					// this.$set(this.list[i],'status',1)
					this.getList();
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			async onPay(type,id){
				// console.log(this.operationLoading)
				if(type){
					this.operationLoading = true
					try{
						var result1 = await setOrderPay({pay_type:type,duan_type:1,id:this.operationId,debug:0,pingtai:this.pingtai})
						console.log(result1,'result1')
						uni.requestPayment({
							provider:type == 1 ? 'alipay' : 'wxpay',
							orderInfo:result1,
							success: e => {
								uni.showToast({title:'支付成功'})
								setTimeout(()=>{
									this.total = 0
									this.page = 1
									this.getList()
								},300)
							},
							fail: e => {
								console.log(JSON.stringify(e),'fail')
								uni.showToast({title:'支付失败',icon:'none'})
							},
							complete: () => {
								this.payObj.visible = false
								this.operationLoading = false
								this.operationType = null
								this.operationId = null
							}
						});
					}catch{
						this.payObj.visible = false
						this.operationLoading = false
						this.operationType = null
						this.operationId = null
					}
					
				}else{
					this.operationId = id
					this.operationType = 'pay'
					if(this.duanType == 1){
						this.payObj.visible = true
					}else{
						try{
							var result = await setOrderPay({pay_type:4,duan_type:2,id:this.operationId,debug:0,pingtai:this.pingtai})
							uni.requestPayment({
								'provider': 'wxpay',
								 ...result,
								success:  (res1) =>{
								  uni.showToast({
									title:'支付成功'
								  })
								setTimeout(()=>{
									this.total = 0
									this.page = 1
									this.getList()
								},300)
								},
								complete: () => {
									this.operationLoading = false
									this.operationType = null
									this.operationId = null
								},
								fail: function (err) {
								 uni.showToast({
									title:'支付失败',icon:'none'
								 })
								}
							});
						}catch{
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
						}
						
					}
				}
			},
			async onAddCart(row){
				if(this.operationLoading) return
				this.operationLoading = true
				this.operationType = 'addCart'
				this.operationId = row.id
				// uni.showToast({title:'暂无接口',icon:'none'})
				try{
					var res = await setAddCart({id:row.id})
					uni.showToast({title:'添加成功',icon:'none'})
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			onConfirmReceipt(row,i){
				if(this.operationLoading) return
				uni.showModal({
					title: '提示',
					content: `您确认收货当前商品吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.operationLoading = true
						   this.operationType = 'confirmReceipt'
						   this.operationId = row.id
						  try{
							var res1  = await setConfirmReceipt({id:row.id})
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
							this.$set(this.list[i],'status',5)
						  }catch{
							  this.operationLoading = false
							  this.operationType = null
							  this.operationId = null
						  }
					  }
					}
				})
			},
			onDetails(row) {
				uni.navigateTo({
					url: '/pagesMy/order/details?id=' + row.id + '&goods_id=' + row.goods_id
				})
			},
			onshop(row) {
				if(row.shopping_type == 1){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=findCraftsman&name='+ encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 2){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=findDesign&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 3){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 4){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 5){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name)
					})
				}else if(row.shopping_type == 6){
					uni.navigateTo({
						url: '/pagesCommodity/shopDetailsDefault?id=' + row.shopping_id + '&type=buildingMaterialsCity&name=' + encodeURIComponent(row.shopping_name) + '&duihuan=1'
					})
				}else{
					uni.showToast({
						title:'该商品无店铺',icon:'none'
					})
				}
				
				
			},
			onComment(row) {
				uni.navigateTo({
					url: '/pagesMy/order/evaluate?id=' + row.id + '&type=' + row.type + '&goods_id=' + row.goods_id
				})
			},
			orderTracking(row) {
				uni.navigateTo({
					url: '/pagesMy/order/orderTracking?id=' + row.id
				})
			},
			onswiperchange(e) {
				if(this.loading) return 
				let index = e.target.current || e.detail.current
				this.switchTab(this.tabList[index].id)
			},
			switchTab(x){
				var index = this.tabList.findIndex(c=>c.id == x)
				if(index == this.tabIndex) return 
				this.tabIndex = index
				this.tabActive = x
				this.$refs.tabRow.active = x
				this.page = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			changeTab(x) {
				this.tabActive = x
				this.switchTab(x)
			},
			async getList() {
				if(this.page == 1) uni.showLoading({mask:true})
				this.loading = true
				try{
					var res = await getOrderList({status:this.tabActive,limit:this.size,page:this.page})
					if(res.count > 0) {
						this.list = this.page == 1 ? res.list : [...this.list,...res.list]
					}
					this.total = res.count
					if(this.page == 1) uni.hideLoading()
					this.loading = false
				}catch{
					if(this.page == 1) uni.hideLoading()
					this.loading = false
				}
			},
			loadMore() {
				if(this.loading || this.page  * this.size >= this.total) return
				this.page ++ 
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	}
	.tab_row {
		padding: 40rpx 36rpx 24rpx;
		box-sizing: border-box;
	}

	// .list_info {
	// 	flex: 1;
	// 	display: flex;
	// 	flex-direction: column;
	// 	overflow: hidden;
	// }

	// .list_box {
	// 	height: 100%;
	// 	width: 100%;
	// }
	.tab_data_box{
		flex:1;
		background: #f1f1f19e;
		.tab_data_row{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}

	.list {
		padding: 0 20rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.info_row {
		margin-top: 20rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 8rpx 0px rgba(208, 208, 208, 0.37);
		background-color: #fff;
		padding: 24rpx 20rpx 32rpx;
		box-sizing: border-box;

		.shop {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: calc(100% - 7em);
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50px;
				}

				text {
					width: calc(100% - 56rpx);
					font-size: 28rpx;
					line-height: 40rpx;
					color: #000;
					font-weight: 600;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.right {
				text-align: right;
				width: 6em;
				color: #ff9b03;
				font-weight: 600;
				font-size: 28rpx;
				line-height: 34rpx;
			}

			.text1 {
				color: #666666
			}
		}

		.commodity_box {
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;

			>.left {
				image {
					width: 144rpx;
					height: 144rpx;
				}
			}

			>.right {
				width: calc(100% - 162rpx);
				display: flex;
				justify-content: space-between;

				.right_right {
					width: 123rpx;
					text-align: right;

					.money {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #26252A;
						font-weight: 700;
					}

					.num {
						font-size: 24rpx;
						line-height: 34rpx;
						color: #666666;
					}
				}

				.right_left {
					width: calc(100% - 138rpx);

					// display: flex;
					// height: 144rpx;
					// flex-direction: column;
					// justify-content: space-between;
					.name {
						font-size: 24rpx;
						line-height: 40rpx;
						color: #272727;
						height: 80rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellispsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.label {
						margin-top: 16rpx;
						height: 48rpx;
						background: #f6f7fb;
						font-size: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #ADADAD;
						line-height: 48rpx;
						padding: 0 24rpx;
						max-width: 320rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.money_box {
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			line-height: 44rpx;
			color: #26252A;
			margin-top: 28rpx;

			.money {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 600;
				color:#ff9b03;
			}
		}

		.button_box {
			margin-top: 16rpx;
			text-align: right;

			.btn {
				display: inline-block;
				margin-left: 20rpx;

				&:first-child {
					margin-left: 0;
				}

				width: 162rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #bbbbbb;
				border-radius: 32rpx;
				font-size: 24rpx;
				color:#666666;
			}

			.btn1 {
				border: 0rpx solid #ff9e0c;
				// background: #ff9800;
				// color: #fff
				
				color: #f4f4f4!important;
				// background: #393939!important
				background-image: linear-gradient(rgb(255,155,3), rgb(252,183,78))!important;
				box-shadow: 0px 3px 7px 0px #ff9e0c;
			}
		}
	}
	.pay_pop{
		border-radius: 30rpx 30rpx 0 0;
		width: 750rpx;
		background-color: #fff;
		height: 400rpx;
		display: flex;
		position: relative;
		.icon{
			position: absolute;
			right: 26rpx;
			top:26rpx;
		}
		.row{
			flex:1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 26rpx;
			}
			text{
				font-size: 28rpx;
				height: 44rpx;
				color:#26252A;
			}
		}
	}


	button[loading]::before {
		align-self: center
	}

	button {
		display: flex;
		justify-content: center;
		align-item: center;
		padding: 0;
	}

	button::after {
		border: none;
	}
	
</style>
